<template>
  <div :class="$style.wrapper">
    <ul :class="$style.navigatorWrapper">
      <li :class="activeMainTab(index)"
          :key="index"
          @click="clickMainTab(tab, index)"
          v-for="(tab,index) in mainTabs">
        {{ tab.name }}
      </li>
    </ul>
    <div :class="$style.contentWrapper">
      <ps-head></ps-head>
      <div :class="$style.content">
        <div :class="$style.deviceTree" v-show="showTree">
          <ps-device-tree></ps-device-tree>
        </div>
        <div :class="$style.viewBox">
          <p :class="$style.deviceInfo" v-show="showTree">{{ currentResourcePath }}</p>
          <router-view :class="mainViewContent"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PsHead from './../../default/components/head/PsHead.vue';
import PsDeviceTree from './../../default/components/device-tree/PsDeviceTree.vue';
import { mapGetters, mapState } from 'vuex';
import vpJson from './../../view-id-page';

export default {
  name: 'RouterMain',
  components: {
    PsHead,
    PsDeviceTree
  },
  data () {
    return {
      mainIndex: 0,
      showTree: false
    };
  },
  watch: {
    currentResource: {
      immediate: true,
      handler (res) {
        if (this.$route.name.indexOf('AreaState') > -1 && res && (res.modelId === 300 || res.modelId === 301)) {
          this.showTree = false;
        }
      }
    },
    '$route': {
      immediate: true,
      handler (to) {
        this.mainIndex = parseInt(to.params.mainIndex);
        this.showTree = parseInt(to.params.showTree) === 1;
        this.$store.commit('resource/setCurrentResourceId', to.params.resourceId);
        if (to.name.indexOf('AreaState') > -1 && this.currentResource && (this.currentResource.modelId === 300 || this.currentResource.modelId === 301)) {
          this.showTree = false;
        }
      }
    }
  },
  methods: {
    activeMainTab (index) {
      return index === this.mainIndex ? `${this.$style.tabItem} ${this.$style['active']}` : this.$style.tabItem;
    },
    clickMainTab (tab, index) {
      let secondChildren = tab.children;
      if (secondChildren && secondChildren.length > 0) {
        this.$store.commit('role/setCurrentSecondTabs', secondChildren);
        let viewId = secondChildren[0].viewId;
        viewId = vpJson[viewId] || viewId;
        this.$router.push(`/app-sc/Second/${secondChildren[0].showTree}/${this.currentResourceId}/${index}/0/${viewId}`);
      } else {
        this.$store.commit('role/setCurrentSecondTabs', []);
        let viewId = tab.viewId;
        viewId = vpJson[viewId] || viewId;
        this.$router.push(`/app-sc/Main/${tab.showTree}/${this.currentResourceId}/${index}/${viewId}`);
      }
    }
  },
  computed: {
    ...mapGetters('role', [
      'mainTabs'
    ]),
    ...mapGetters('resource', [
      'currentResourcePath',
      'currentResource'
    ]),
    ...mapState('resource', [
      'currentResourceId'
    ]),
    currentUser () {
      return this.$store.state.user.currentUser;
    },
    mainViewContent () {
      return this.showTree ? `${this.$style.mainViewContent} ${this.$style.showTree}` : this.$style.mainViewContent;
    }
  }
};
</script>
<style lang="scss" module>
@import "./../../style/default/router-main.scss";
</style>
